<template>
	<view class="content auto-scroll" style="padding-top: 44px;">
    <law-top-nav title="2"  isOrder="3"></law-top-nav>
		<view class="type-box">
<!--			<view class="type-item" @click="replace('/pages/client/user/order')" >我的订单</view>-->
<!--			<view class="type-item active" @click="replace('/pages/specialist/user/receive-order')">我的接单</view>-->
			<!-- <view class="type-item active" @click="replace('/pages/specialist/user/receive-order')" v-else-if="userInfo.user_type == 2">我的接单</view> -->
		</view>
<!--		<view class="item-content">-->
<!--			<view class="item-status" :class="{active:current==index+1}" v-for="(item,index) in data" @click="loadData(index+1,'refresh')">{{item}}</view>-->
<!--		</view>-->
		<view class="order-list-box">
			<view class="order-item" @click="navTo(item)" v-for="(item, index) in dataList" :style="index==0?'margin-top:20rpx':''">
				<view class="item-top">
					<view class="top-left" @click.stop="jump('/pages/client/index/list', { id: item.id })">
						<view class="image-wrapper" style="width:60rpx;height:60rpx"><image :src="item.pro_image" mode="aspectFit"></image></view>
						<view class="left-txt" style="position:relative">{{ item.product_title }} 	<image style="right:-90rpx" v-if="item.lawyer_call == 1 || item.legal_call == 1"  src="@/static/img/order-clock.png" class="image-clock"></image>
				</view>
						<view class="image-wrapper image-wrapper2"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
					</view>
					<!-- 委托人在15分钟内无理由更换律师的，原律师进入“订单取消”界面。 -->
					<!-- 12=订单结束-->
					<!-- "1": "法务接单", "2": "法务点击完成","13": "委托人点击完成法务", -->
					<!-- "15": "法务完成" -->
					<view class="top-right gray" v-if="item.status == -1">订单取消</view>
					<!-- <view class="top-right gray" v-else-if="item.status == 12">服务解除</view> -->
					<view class="top-right gray" v-else-if="item.status == 1 || item.status == 2 || item.status == 13 || item.status == 18 || item.status == 19 || item.status == 20">法务服务中</view>
					<view class="top-right gray" v-else>服务完成</view>
				</view>
				<!-- 委托人在15分钟或者法务中，叫一下显示闹钟 -->
				<view style="display:flex">
					<view class="item-img" style="width:60rpx">
					</view>
					<view class="item-txt">
						<view class="item-order">
							<text class="order-txt text-ellipsis">订单号：{{ item.order_sn }}</text>
						</view>
						<law-product-intro2 :item="item" :isshou="2" :userInfo="userInfo"></law-product-intro2>
						<order-list-other2 :item="item" :userInfo="userInfo"></order-list-other2>
						<!-- <view class="item-tip text-ellipsis">
							<text class="tip-item">{{ item.client_name }}</text>
							<text class="tip-item">{{ item.client_tel }}</text>
						</view> -->
						<!-- 我的要求 -->
						<!-- <view class="item-tip text-ellipsis" v-if="item.requirement">
							<text class="tip-item">要求：{{ item.requirement }}</text>
						</view> -->
						<!-- <view class="item-prize">

							<text class="prize-num">￥{{ item.money }}</text>
						</view> -->
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<!-- 全局通用组件 -->
		<law-common ref="lawCommon"></law-common>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			dataList: [],
			page: 1, //分页加载
			loadingType: 'more' ,//加载更多状态
			data:['全部订单','法务接单','投资人接单'],
			current:1
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onLoad() {
		this.loadData(1,'refresh');
	},
	methods: {
    init() {
      this.loadData(1,'refresh');
    },
		timeup() {
			this.isTimeOver = true;
		},
		navTo(item) {
			if (item.status == -1) {
				this.jump('/pages/specialist/user/order-cancel', { order_id: item.id });
			} else if (item.status == 12) {
				this.jump('/pages/specialist/user/service-ok', { order_id: item.id });
			} else if (item.status == 1 || item.status == 2 || item.status == 13 || item.status == 18 || item.status == 19 || item.status == 20) {
				this.jump('/pages/specialist/user/service-specialist', { order_id: item.id, status: item.status });
			} else {
				this.jump('/pages/specialist/user/service-ok', { order_id: item.id });
			}
		},
		//带下拉刷新和上滑加载
		async loadData(index,type = 'add', loading) {
			this.current=index
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else if (type === 'refresh') {
				this.loadingType = 'loading';
				this.page = 1;
				this.dataList = [];
			} else {
				this.loadingType = 'more';
			}
			/* let user_type = this.current;
			if(this.current == 2){
				user_type = this.current+1
			}
			if(this.current == 3){
				user_type = this.current+1
			} */
			let formData = {
				page: this.page,
				token: uni.getStorageSync('token'),
				user_type:3,
			};
			let res = await this.$api('index.my_order', formData);
			let dataList = res.data.order;

			this.page++;
			this.dataList = this.dataList.concat(dataList);

			this.loadingType = res.data.current_page >= res.data.total_page ? 'nomore' : 'more';

		}
	},
  //加载更多
  onReachBottom() {
		this.loadData(this.current);
	},
  onPullDownRefresh(){
  }
};
</script>

<style lang="scss">
.fontsize24 {
	font-size: 24rpx !important;
}
.service-list {
	padding-top: 10px;
}
.image-wrapper {
	position: relative;
}
.image-clock {
	position: absolute;
	width: 50rpx !important;
	height: 50rpx !important;
	right: -10rpx;
	bottom: -10rpx;
}
.item-content {
	display: flex;
	margin: 0 25rpx 20rpx;
	height: 60rpx;
	.item-status {
		width: 250rpx;
		height: 60rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		border: 1rpx #ffca00 solid;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		color: #777777;
		font-size: 24rpx;
		&:first-child {
			margin-left: 0;
		}
	}
	.active {
		color: #ffca00;
	}
}
.top-left{
  width: auto!important;
}
::v-deep ::-webkit-scrollbar { /* 滚动条整体样式 */
  width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}
::v-deep ::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */
  border-radius: 0px;
  // -webkit-box-shadow: inset 0 0 5px #FF5E00;
  background:transparent;
}
::v-deep ::-webkit-scrollbar-track { /* 滚动条里面轨道 */
  // -webkit-box-shadow: inset 0 0 5px #FFD6B1;
  border-radius: 0px;
  background: transparent;
}
::v-deep .auto-scroll ::-webkit-scrollbar { /* 组件内滚动条不显示 */
  display: none;
}
</style>
